<template>
  <div class="index">
    <div class="index-carousel-wrapper">
      <div class="index-carousel-container">
        <div class="index-carousel-top">
          <div class="index-carousel-top-aside">
            <div class="menu-content">
              <div class="item" data-id="a">
                <span class="title">前端开发：</span>
                <span class="sub-title">HTML5 / Vue.js / Node.js</span>
                <i class="imv2-arrow1_r"></i>
              </div>
              <div class="item" data-id="b">
                <span class="title">后端开发：</span>
                <span class="sub-title">Java / Python / Go</span>
                <i class="imv2-arrow1_r"></i>
              </div>
              <div class="item" data-id="c">
                <span class="title">移动开发：</span>
                <span class="sub-title">Flutter / Android / iOS  </span>
                <i class="imv2-arrow1_r"></i>
              </div>
              <div class="item" data-id="d">
                <span class="title">计算机基础：</span>
                <span class="sub-title">算法 / 数学 / 数据库</span>
                <i class="imv2-arrow1_r"></i>
              </div>
              <div class="item" data-id="e">
                <span class="title">前沿技术：</span>
                <span class="sub-title">AI / 大数据 / 数据分析</span>
                <i class="imv2-arrow1_r"></i>
              </div>
              <div class="item" data-id="f">
                <span class="title">测试运维：</span>
                <span class="sub-title">自动化测试 / 容器</span>
                <i class="imv2-arrow1_r"></i>
              </div>
              <div class="item" data-id="g">
                <span class="title">更多方向：</span>
                <span class="sub-title">产品设计 / UI设计 / 游戏</span>
                <i class="imv2-arrow1_r"></i>
              </div>
            </div>
          </div>
          <the-carousel class="index-carousel" :courses="news"></the-carousel>
        </div>
        <div class="index-carousel-bottom">
          <div class="system-class-show">
            <a class="show-box" v-for="circleInfo in circleInfos">
              <img class="system-class-icon" :src="circleInfo.circle">
              <div class="describe">
                <h4>{{circleInfo.h4}}</h4>
                <p>{{circleInfo.p}}</p></div>
            </a>
          </div>
        </div>
      </div>
    </div>
    <div class="index-new-wrapper">
      <div class="index-new-image-wrapper">
        <el-image class="index-new-image" src="/web/static/image/xinshanghaoke.png"></el-image>
      </div>
      <div class="index-new-list">
        <the-course-card v-for="course in news" :key="course.id" :course="course"></the-course-card>
      </div>
    </div>
    <div class="index-top-wrapper">
      <div class="index-top-image-wrapper">
        <el-image class="index-top-image" src="/web/static/image/jinzhanbixue.png"></el-image>
      </div>
      <div class="index-top-list">
        <the-course-card v-for="course in top" :key="course.id" :course="course"></the-course-card>
      </div>
    </div>
  </div>
</template>

<script>
  import TheCourseCard from "../components/the-course-card"
  import TheCarousel from "../components/the-carousel";

  export default {
    name: "index",
    components: {TheCarousel, TheCourseCard},
    data: function () {
      return {
        news: [],
        top: [],
        circleInfos: [{
          circle: '/web/static/image/circle_java.jpg',
          h4: 'Java工程师',
          p: '综合就业率第一'
        },{
          circle: '/web/static/image/circle_html.jpg',
          h4: '前端工程师',
          p: '入门快、就业快、岗位多'
        },{
          circle: '/web/static/image/circle_python.jpg',
          h4: 'Python工程师',
          p: '应用领域最广泛'
        },{
          circle: '/web/static/image/circle_web.jpg',
          h4: 'Web前端架构师',
          p: '培养前端P7级架构师'
        },{
          circle: '/web/static/image/circle_java1.jpg',
          h4: 'Java架构师P7',
          p: '千万级电商架构0-100'
        }]
      }
    },
    mounted() {
      let _this = this
      _this.listNew()
      _this.listTop()
    },
    methods: {
      /**
       * 查询新上好课
       */
      listNew() {
        let _this = this;

        // 新上好课不经常变，又经常被访问，适合用缓存
        // 判断是否有缓存
        // let news = SessionStorage.get("news");
        // if (!Tool.isEmpty(news)) {
        //   _this.news = news
        //   return
        // }

        _this.$axios.get(process.env.VUE_APP_SERVER + '/business/web/course/list-new').then((resp) => {
          if (resp.data.success) {
            _this.news = resp.data.content
            // 保存到缓存 (用会话缓存, 刷新首页缓存不会清空, 关闭会清空)
            //SessionStorage.set("news", _this.news)
          }
        }).catch((response) => {
          console.log("error：", response)
        })
      },

      /**
       * 查询进站必学
       */
      listTop() {
        let _this = this;

        // 新上好课不经常变，又经常被访问，适合用缓存
        // 判断是否有缓存
        // let news = SessionStorage.get("news");
        // if (!Tool.isEmpty(news)) {
        //   _this.news = news
        //   return
        // }

        _this.$axios.get(process.env.VUE_APP_SERVER + '/business/web/course/list-top').then((resp) => {
          if (resp.data.success) {
            _this.top = resp.data.content
            // 保存到缓存 (用会话缓存, 刷新首页缓存不会清空, 关闭会清空)
            //SessionStorage.set("news", _this.news)
          }
        }).catch((response) => {
          console.log("error：", response)
        })
      },
    }
  }
</script>

<style lang="less">
  .index {

    .index-carousel-wrapper {
      width: 100%;
      height: 520px;
      background-image: linear-gradient(#ffd79c, #ffffff, #ffffff);
      padding: 20px 0;
      box-shadow: 0 2px 8px 0 rgb(7 17 27 / 6%);
      z-index: 100;
      position: relative;

      .index-carousel-container {
        border-radius: 8px;
        width: 1050px;
        margin: auto;

        .index-carousel-top {
          height: 350px;
          display: flex;
          //border-radius: 8px 8px 8px 8px;

          .index-carousel-top-aside {
            width: 250px;

            .menu-content {
              position: relative;
              float: left;
              width: 250px;
              z-index: 2;
              box-sizing: border-box;
              background: #39364d;
              border-radius: 8px 0 0 0;
              font-weight: 400;

              .item {
                line-height: 50px;
                cursor: pointer;
                position: relative;
                color: #fff;
                padding: 0 14px;
                height: 50px;
                transition: all .1s;
                font-size: 14px;

                .title {

                }

                .sub-title {
                  font-size: 12px;
                }
              }
            }
          }

          .index-carousel {
            width: 800px;
            height: 350px;
            border-radius: 0 8px 0 0;
          }
        }

        .index-carousel-bottom {

          .system-class-show {
            width: 1050px;
            height: 100px;
            margin: 0 auto;
            background: #FFFFFF;
            box-shadow: 0 5px 20px 0 rgb(0 0 0 / 30%);
            border-radius: 0 0 8px 8px;

            .show-box {
              display: block;
              width: 192px;
              height: 45px;
              float: left;
              margin: 28px 0 0 16px;
              cursor: pointer;

              .system-class-icon {
                float: left;
                width: 45px;
                height: 45px;
                border-radius: 50%;
                background-size: cover;
                margin-right: 8px;
              }

              .describe {
                float: left;

                h4 {
                  width: 139px;
                  font-size: 16px;
                  color: #1C1F21;
                  letter-spacing: 0.76px;
                  line-height: 22px;
                  margin: 0;
                  white-space: nowrap;
                  overflow: hidden;
                }

                p {
                  width: 139px;
                  font-size: 12px;
                  color: #545C63;
                  line-height: 18px;
                  white-space: nowrap;
                  overflow: hidden;
                }
              }
            }
          }
        }
      }
    }

    .index-new-wrapper {
      width: 100%;
      background-color: #F5F7FA;
      padding: 20px 0;

      .index-new-image-wrapper {
        margin: auto;
        width: 1188px;

        .index-new-image {
          height: 36px;
        }
      }

      .index-new-list {
        width: 1188px;
        height: 600px;
        margin: auto;
        display: flex;
        justify-content: flex-start;
        flex-wrap: wrap;
      }
    }

    .index-top-wrapper {
      box-shadow: 0 2px 8px 0 rgb(7 17 27 / 6%);
      width: 100%;
      background-color: white;
      padding: 20px 0;

      .index-top-image-wrapper {
        margin: auto;
        width: 1188px;

        .index-top-image {
          height: 36px;
        }
      }

      .index-top-list {
        width: 1188px;
        height: 600px;
        margin: auto;
        display: flex;
        justify-content: flex-start;
        flex-wrap: wrap;
      }
    }
  }
</style>